<template>
    <BaseEcharts :chatsOption="chatsOption"></BaseEcharts>
</template>

<script>
    import BaseEcharts from "../../../components/common/Cahrts/coreEcharts"

    export default {
        components: {
            BaseEcharts
        },
        props: {
            chatsOption: {
                type: Object,
                default() {
                    return {
                        color: ['#96FAFC', '#8275F9', '#FA599A'],
                        tooltip: {
                            trigger: 'axis',
                            formatter: '{b0}{a0}: {c0}<br />{b1}{a1}: {c1}<br />{b2}{a2}: {c2}<br />',
                            axisPointer: {
                                type: 'line',
                                label: {
                                    backgroundColor: '#283b56'
                                }
                            },
                            textStyle: {
                                fontSize: 60,
                            },
                            padding: 20,
                            borderWidth: 4,
                            borderColor: "#48AFFF",
                            backgroundColor: "#010541",
                            extraCssText: "border-radius:20px;",

                        },
                        legend: {
                            // data: ['Forest', 'Steppe', 'Desert', 'Wetland']
                            orient: "vertical",
                            right: "1%",
                            // width: "1%",
                            // height: "100%",
                            itemWidth: 40,
                            itemHeight: 20,
                            textStyle:{
                                color:"#fff",
                                fontSize:40,
                            }
                        },
                        grid: {
                            left: "12%",
                            top: "1%",
                            right:"20%"
                        },

                        xAxis: [
                            {
                                type: 'value',
                                splitLine: {
                                    show: false,
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: "#fff",
                                    }
                                },
                                axisLabel: {
                                    fontSize: 40,
                                    color: "#fff",
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'category',
                                axisTick: {show: false},
                                axisLine: {
                                    lineStyle: {
                                        color: "#fff",
                                    }
                                },
                                axisLabel: {
                                    fontSize: 40,
                                    color: "#fff",
                                },
                                data: ['2012', '2013', '2014', '2015', '2016']
                            }

                        ],
                        series: [
                            {
                                name: 'Forest',
                                type: 'bar',
                                stack: "stack",
                                barMaxWidth:"40%",
                                data: [320, 332, 301, 334, 390]
                            },
                            {
                                name: 'Steppe',
                                type: 'bar',
                                stack: "stack",
                                barMaxWidth:"40%",

                                data: [220, 182, 191, 234, 290]
                            },
                            {
                                name: 'Desert',
                                type: 'bar',
                                stack: "stack",
                                barMaxWidth:"40%",
                                data: [150, 232, 201, 154, 190]
                            },

                        ]
                    };
                }
            }
        }

    }
</script>
